<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-panel-Panel'>/**
</span> * @class Ext.panel.Panel
 * @extends Ext.panel.AbstractPanel
 * &lt;p&gt;Panel is a container that has specific functionality and structural components that make
 * it the perfect building block for application-oriented user interfaces.&lt;/p&gt;
 * &lt;p&gt;Panels are, by virtue of their inheritance from {@link Ext.container.Container}, capable
 * of being configured with a {@link Ext.container.Container#layout layout}, and containing child Components.&lt;/p&gt;
 * &lt;p&gt;When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.container.Container#add adding} Components
 * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
 * those child elements need to be sized using one of Ext&amp;#39;s built-in &lt;code&gt;&lt;b&gt;{@link Ext.container.Container#layout layout}&lt;/b&gt;&lt;/code&gt; schemes. By
 * default, Panels use the {@link Ext.layout.container.Auto Auto} scheme. This simply renders
 * child components, appending them one after the other inside the Container, and &lt;b&gt;does not apply any sizing&lt;/b&gt;
 * at all.&lt;/p&gt;
 * {@img Ext.panel.Panel/panel.png Panel components}
 * &lt;p&gt;A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate
 * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional
 * information).&lt;/p&gt;
 * &lt;p&gt;Panel also provides built-in {@link #collapsible collapsible, expandable} and {@link #closable} behavior.
 * Panels can be easily dropped into any {@link Ext.container.Container Container} or layout, and the
 * layout and rendering pipeline is {@link Ext.container.Container#add completely managed by the framework}.&lt;/p&gt;
 * &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; By default, the &lt;code&gt;{@link #closable close}&lt;/code&gt; header tool &lt;i&gt;destroys&lt;/i&gt; the Panel resulting in removal of the Panel
 * and the destruction of any descendant Components. This makes the Panel object, and all its descendants &lt;b&gt;unusable&lt;/b&gt;. To enable the close
 * tool to simply &lt;i&gt;hide&lt;/i&gt; a Panel for later re-use, configure the Panel with &lt;b&gt;&lt;code&gt;{@link #closeAction closeAction: 'hide'}&lt;/code&gt;&lt;/b&gt;.&lt;/p&gt;
 * &lt;p&gt;Usually, Panels are used as constituents within an application, in which case, they would be used as child items of Containers,
 * and would themselves use Ext.Components as child {@link #items}. However to illustrate simply rendering a Panel into the document,
 * here&amp;#39;s how to do it:&lt;pre&gt;&lt;code&gt;
Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 200,
    html: '&amp;lt;p&amp;gt;World!&amp;lt;/p&amp;gt;',
    renderTo: document.body
});
&lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
 * &lt;p&gt;A more realistic scenario is a Panel created to house input fields which will not be rendered, but used as a constituent part of a Container:&lt;pre&gt;&lt;code&gt;
var filterPanel = Ext.create('Ext.panel.Panel', {
    bodyPadding: 5,  // Don&amp;#39;t want content to crunch against the borders
    title: 'Filters',
    items: [{
        xtype: 'datefield',
        fieldLabel: 'Start date'
    }, {
        xtype: 'datefield',
        fieldLabel: 'End date'
    }]
});
&lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
 * &lt;p&gt;Note that the Panel above is not configured to render into the document, nor is it configured with a size or position. In a real world scenario,
 * the Container into which the Panel is added will use a {@link #layout} to render, size and position its child Components.&lt;/p&gt;
 * &lt;p&gt;Panels will often use specific {@link #layout}s to provide an application with shape and structure by containing and arranging child
 * Components: &lt;pre&gt;&lt;code&gt;
var resultsPanel = Ext.create('Ext.panel.Panel', {
    title: 'Results',
    width: 600,
    height: 400,
    renderTo: document.body,
    layout: {
        type: 'vbox',       // Arrange child items vertically
        align: 'stretch',    // Each takes up full width
        padding: 5
    },
    items: [{               // Results grid specified as a config object with an xtype of 'grid'
        xtype: 'grid',
        columns: [{header: 'Column One'}],            // One header just for show. There&amp;#39;s no data,
        store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
        flex: 1                                       // Use 1/3 of Container&amp;#39;s height (hint to Box layout)
    }, {
        xtype: 'splitter'   // A splitter between the two child items
    }, {                    // Details Panel specified as a config object (no xtype defaults to 'panel').
        title: 'Details',
        bodyPadding: 5,
        items: [{
            fieldLabel: 'Data item',
            xtype: 'textfield'
        }], // An array of form fields
        flex: 2             // Use 2/3 of Container&amp;#39;s height (hint to Box layout)
    }]
});
&lt;/code&gt;&lt;/pre&gt;
 * The example illustrates one possible method of displaying search results. The Panel contains a grid with the resulting data arranged
 * in rows. Each selected row may be displayed in detail in the Panel below. The {@link Ext.layout.container.VBox vbox} layout is used
 * to arrange the two vertically. It is configured to stretch child items horizontally to full width. Child items may either be configured
 * with a numeric height, or with a &lt;code&gt;flex&lt;/code&gt; value to distribute available space proportionately.&lt;/p&gt;
 * &lt;p&gt;This Panel itself may be a child item of, for exaple, a {@link Ext.tab.Panel} which will size its child items to fit within its
 * content area.&lt;/p&gt;
 * &lt;p&gt;Using these techniques, as long as the &lt;b&gt;layout&lt;/b&gt; is chosen and configured correctly, an application may have any level of
 * nested containment, all dynamically sized according to configuration, the user&amp;#39;s preference and available browser size.&lt;/p&gt;
 */
Ext.define('Ext.panel.Panel', {
    extend: 'Ext.panel.AbstractPanel',
    requires: [
        'Ext.panel.Header',
        'Ext.fx.Anim',
        'Ext.util.KeyMap',
        'Ext.panel.DD',
        'Ext.XTemplate',
        'Ext.layout.component.Dock',
        'Ext.util.Memento'
    ],
    alias: 'widget.panel',
    alternateClassName: 'Ext.Panel',

<span id='Ext-panel-Panel-cfg-collapsedCls'>    /**
</span>     * @cfg {String} collapsedCls
     * A CSS class to add to the panel&amp;#39;s element after it has been collapsed (defaults to
     * &lt;code&gt;'collapsed'&lt;/code&gt;).
     */
    collapsedCls: 'collapsed',

<span id='Ext-panel-Panel-cfg-animCollapse'>    /**
</span>     * @cfg {Boolean} animCollapse
     * &lt;code&gt;true&lt;/code&gt; to animate the transition when the panel is collapsed, &lt;code&gt;false&lt;/code&gt; to skip the
     * animation (defaults to &lt;code&gt;true&lt;/code&gt; if the {@link Ext.fx.Anim} class is available, otherwise &lt;code&gt;false&lt;/code&gt;).
     * May also be specified as the animation duration in milliseconds.
     */
    animCollapse: Ext.enableFx,

<span id='Ext-panel-Panel-cfg-minButtonWidth'>    /**
</span>     * @cfg {Number} minButtonWidth
     * Minimum width of all footer toolbar buttons in pixels (defaults to &lt;tt&gt;75&lt;/tt&gt;). If set, this will
     * be used as the default value for the &lt;tt&gt;{@link Ext.button.Button#minWidth}&lt;/tt&gt; config of
     * each Button added to the &lt;b&gt;footer toolbar&lt;/b&gt; via the {@link #fbar} or {@link #buttons} configurations.
     * It will be ignored for buttons that have a minWidth configured some other way, e.g. in their own config
     * object or via the {@link Ext.container.Container#config-defaults defaults} of their parent container.
     */
    minButtonWidth: 75,

<span id='Ext-panel-Panel-cfg-collapsed'>    /**
</span>     * @cfg {Boolean} collapsed
     * &lt;code&gt;true&lt;/code&gt; to render the panel collapsed, &lt;code&gt;false&lt;/code&gt; to render it expanded (defaults to
     * &lt;code&gt;false&lt;/code&gt;).
     */
    collapsed: false,

<span id='Ext-panel-Panel-cfg-collapseFirst'>    /**
</span>     * @cfg {Boolean} collapseFirst
     * &lt;code&gt;true&lt;/code&gt; to make sure the collapse/expand toggle button always renders first (to the left of)
     * any other tools in the panel&amp;#39;s title bar, &lt;code&gt;false&lt;/code&gt; to render it last (defaults to &lt;code&gt;true&lt;/code&gt;).
     */
    collapseFirst: true,

<span id='Ext-panel-Panel-cfg-hideCollapseTool'>    /**
</span>     * @cfg {Boolean} hideCollapseTool
     * &lt;code&gt;true&lt;/code&gt; to hide the expand/collapse toggle button when &lt;code&gt;{@link #collapsible} == true&lt;/code&gt;,
     * &lt;code&gt;false&lt;/code&gt; to display it (defaults to &lt;code&gt;false&lt;/code&gt;).
     */
    hideCollapseTool: false,

<span id='Ext-panel-Panel-cfg-titleCollapse'>    /**
</span>     * @cfg {Boolean} titleCollapse
     * &lt;code&gt;true&lt;/code&gt; to allow expanding and collapsing the panel (when &lt;code&gt;{@link #collapsible} = true&lt;/code&gt;)
     * by clicking anywhere in the header bar, &lt;code&gt;false&lt;/code&gt;) to allow it only by clicking to tool button
     * (defaults to &lt;code&gt;false&lt;/code&gt;)).
     */
    titleCollapse: false,

<span id='Ext-panel-Panel-cfg-collapseMode'>    /**
</span>     * @cfg {String} collapseMode
     * &lt;p&gt;&lt;b&gt;Important: this config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}.&lt;/b&gt;&lt;/p&gt;
     * &lt;p&gt;When &lt;i&gt;not&lt;/i&gt; a direct child item of a {@link Ext.layout.container.Border border layout}, then the Panel&amp;#39;s header remains visible, and the body is collapsed to zero dimensions.
     * If the Panel has no header, then a new header (orientated correctly depending on the {@link #collapseDirection}) will be inserted to show a the title and a re-expand tool.&lt;/p&gt;
     * &lt;p&gt;When a child item of a {@link Ext.layout.container.Border border layout}, this config has two options:
     * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;&lt;code&gt;undefined/omitted&lt;/code&gt;&lt;/b&gt;&lt;div class=&quot;sub-desc&quot;&gt;When collapsed, a placeholder {@link Ext.panel.Header Header} is injected into the layout to represent the Panel
     * and to provide a UI with a Tool to allow the user to re-expand the Panel.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;&lt;code&gt;header&lt;/code&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;The Panel collapses to leave its header visible as when not inside a {@link Ext.layout.container.Border border layout}.&lt;/div&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;&lt;/p&gt;
     */

<span id='Ext-panel-Panel-cfg-placeholder'>    /**
</span>     * @cfg {Mixed} placeholder
     * &lt;p&gt;&lt;b&gt;Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}
     * when not using the &lt;code&gt;'header'&lt;/code&gt; {@link #collapseMode}.&lt;/b&gt;&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Optional.&lt;/b&gt; A Component (or config object for a Component) to show in place of this Panel when this Panel is collapsed by a
     * {@link Ext.layout.container.Border border layout}. Defaults to a generated {@link Ext.panel.Header Header}
     * containing a {@link Ext.panel.Tool Tool} to re-expand the Panel.&lt;/p&gt;
     */

<span id='Ext-panel-Panel-cfg-floatable'>    /**
</span>     * @cfg {Boolean} floatable
     * &lt;p&gt;&lt;b&gt;Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}.&lt;/b&gt;&lt;/p&gt;
     * &lt;tt&gt;true&lt;/tt&gt; to allow clicking a collapsed Panel&amp;#39;s {@link #placeholder} to display the Panel floated
     * above the layout, &lt;tt&gt;false&lt;/tt&gt; to force the user to fully expand a collapsed region by
     * clicking the expand button to see it again (defaults to &lt;tt&gt;true&lt;/tt&gt;).
     */
    floatable: true,

<span id='Ext-panel-Panel-cfg-overlapHeader'>    /**
</span>     * @cfg {Mixed} overlapHeader
     * True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and is done automatically for you). Otherwise it is undefined.
     * If you manually add rounded corners to a panel header which does not have frame:true, this will need to be set to true.
     */

<span id='Ext-panel-Panel-cfg-collapsible'>    /**
</span>     * @cfg {Boolean} collapsible
     * &lt;p&gt;True to make the panel collapsible and have an expand/collapse toggle Tool added into
     * the header tool button area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool (defaults to false).&lt;/p&gt;
     * See {@link #collapseMode} and {@link #collapseDirection}
     */
    collapsible: false,

<span id='Ext-panel-Panel-cfg-collapseDirection'>    /**
</span>     * @cfg {Boolean} collapseDirection
     * &lt;p&gt;The direction to collapse the Panel when the toggle button is clicked.&lt;/p&gt;
     * &lt;p&gt;Defaults to the {@link #headerPosition}&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Important: This config is &lt;u&gt;ignored&lt;/u&gt; for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}.&lt;/b&gt;&lt;/p&gt;
     * &lt;p&gt;Specify as &lt;code&gt;'top'&lt;/code&gt;, &lt;code&gt;'bottom'&lt;/code&gt;, &lt;code&gt;'left'&lt;/code&gt; or &lt;code&gt;'right'&lt;/code&gt;.&lt;/p&gt;
     */

<span id='Ext-panel-Panel-cfg-closable'>    /**
</span>     * @cfg {Boolean} closable
     * &lt;p&gt;True to display the 'close' tool button and allow the user to close the window, false to
     * hide the button and disallow closing the window (defaults to &lt;code&gt;false&lt;/code&gt;).&lt;/p&gt;
     * &lt;p&gt;By default, when close is requested by clicking the close button in the header, the {@link #close}
     * method will be called. This will &lt;i&gt;{@link Ext.Component#destroy destroy}&lt;/i&gt; the Panel and its content
     * meaning that it may not be reused.&lt;/p&gt;
     * &lt;p&gt;To make closing a Panel &lt;i&gt;hide&lt;/i&gt; the Panel so that it may be reused, set
     * {@link #closeAction} to 'hide'.&lt;/p&gt;
     */
    closable: false,

<span id='Ext-panel-Panel-cfg-closeAction'>    /**
</span>     * @cfg {String} closeAction
     * &lt;p&gt;The action to take when the close header tool is clicked:
     * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;&lt;code&gt;'{@link #destroy}'&lt;/code&gt;&lt;/b&gt; : &lt;b&gt;Default&lt;/b&gt;&lt;div class=&quot;sub-desc&quot;&gt;
     * {@link #destroy remove} the window from the DOM and {@link Ext.Component#destroy destroy}
     * it and all descendant Components. The window will &lt;b&gt;not&lt;/b&gt; be available to be
     * redisplayed via the {@link #show} method.
     * &lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;&lt;code&gt;'{@link #hide}'&lt;/code&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;
     * {@link #hide} the window by setting visibility to hidden and applying negative offsets.
     * The window will be available to be redisplayed via the {@link #show} method.
     * &lt;/div&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; This behavior has changed! setting *does* affect the {@link #close} method
     * which will invoke the approriate closeAction.
     */
    closeAction: 'destroy',

<span id='Ext-panel-Panel-cfg-dockedItems'>    /**
</span>     * @cfg {Object/Array} dockedItems
     * A component or series of components to be added as docked items to this panel.
     * The docked items can be docked to either the top, right, left or bottom of a panel.
     * This is typically used for things like toolbars or tab bars:
     * &lt;pre&gt;&lt;code&gt;
var panel = new Ext.panel.Panel({
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            text: 'Docked to the top'
        }]
    }]
});&lt;/pre&gt;&lt;/code&gt;
     */

<span id='Ext-panel-Panel-cfg-preventHeader'>    /**
</span>      * @cfg {Boolean} preventHeader Prevent a Header from being created and shown. Defaults to false.
      */
    preventHeader: false,

<span id='Ext-panel-Panel-cfg-headerPosition'>     /**
</span>      * @cfg {String} headerPosition Specify as &lt;code&gt;'top'&lt;/code&gt;, &lt;code&gt;'bottom'&lt;/code&gt;, &lt;code&gt;'left'&lt;/code&gt; or &lt;code&gt;'right'&lt;/code&gt;. Defaults to &lt;code&gt;'top'&lt;/code&gt;.
      */
    headerPosition: 'top',

<span id='Ext-panel-Panel-cfg-frame'>     /**
</span>     * @cfg {Boolean} frame
     * True to apply a frame to the panel.
     */
    frame: false,

<span id='Ext-panel-Panel-cfg-frameHeader'>    /**
</span>     * @cfg {Boolean} frameHeader
     * True to apply a frame to the panel panels header (if 'frame' is true).
     */
    frameHeader: true,

<span id='Ext-panel-Panel-cfg-tools'>    /**
</span>     * @cfg {Array} tools
     * An array of {@link Ext.panel.Tool} configs/instances to be added to the header tool area. The tools are stored as child
     * components of the header container. They can be accessed using {@link #down} and {#query}, as well as the other
     * component methods. The toggle tool is automatically created if {@link #collapsible} is set to true.
     * &lt;p&gt;Note that, apart from the toggle tool which is provided when a panel is collapsible, these
     * tools only provide the visual button. Any required functionality must be provided by adding
     * handlers that implement the necessary behavior.&lt;/p&gt;
     * &lt;p&gt;Example usage:&lt;/p&gt;
     * &lt;pre&gt;&lt;code&gt;
tools:[{
    type:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    type:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // show help here
    }
}]
&lt;/code&gt;&lt;/pre&gt;
     */

<span id='Ext-panel-Panel-cfg-title'>    /**
</span>     * @cfg {String} title
     * The title text to be used to display in the {@link Ext.panel.Header panel header} (defaults to '').
     * When a `title` is specified the {@link Ext.panel.Header} will automatically be created and displayed unless
     * {@link #preventHeader} is set to `true`.
     */

    initComponent: function() {
        var me = this,
            cls;

        me.addEvents(
<span id='Ext-panel-Panel-event-beforeexpand'>            /**
</span>             * @event beforeexpand
             * Fires before this panel is expanded. Return false to prevent the expand.
             * @param {Ext.panel.Panel} p The Panel being expanded.
             * @param {Boolean} animate True if the expand is animated, else false.
             */
            &quot;beforeexpand&quot;,

<span id='Ext-panel-Panel-event-beforecollapse'>            /**
</span>             * @event beforecollapse
             * Fires before this panel is collapsed. Return false to prevent the collapse.
             * @param {Ext.panel.Panel} p The Panel being collapsed.
             * @param {String} direction. The direction of the collapse. One of&lt;ul&gt;
             * &lt;li&gt;Ext.Component.DIRECTION_TOP&lt;/li&gt;
             * &lt;li&gt;Ext.Component.DIRECTION_RIGHT&lt;/li&gt;
             * &lt;li&gt;Ext.Component.DIRECTION_BOTTOM&lt;/li&gt;
             * &lt;li&gt;Ext.Component.DIRECTION_LEFT&lt;/li&gt;&lt;/ul&gt;
             * @param {Boolean} animate True if the collapse is animated, else false.
             */
            &quot;beforecollapse&quot;,

<span id='Ext-panel-Panel-event-expand'>            /**
</span>             * @event expand
             * Fires after this Panel has expanded.
             * @param {Ext.panel.Panel} p The Panel that has been expanded.
             */
            &quot;expand&quot;,

<span id='Ext-panel-Panel-event-collapse'>            /**
</span>             * @event collapse
             * Fires after this Panel hass collapsed.
             * @param {Ext.panel.Panel} p The Panel that has been collapsed.
             */
            &quot;collapse&quot;,

<span id='Ext-panel-Panel-event-titlechange'>            /**
</span>             * @event titlechange
             * Fires after the Panel title has been set or changed.
             * @param {Ext.panel.Panel} p the Panel which has been resized.
             * @param {String} newTitle The new title.
             * @param {String} oldTitle The previous panel title.
             */
            'titlechange',

<span id='Ext-panel-Panel-event-iconchange'>            /**
</span>             * @event iconchange
             * Fires after the Panel iconCls has been set or changed.
             * @param {Ext.panel.Panel} p the Panel which has been resized.
             * @param {String} newIconCls The new iconCls.
             * @param {String} oldIconCls The previous panel iconCls.
             */
            'iconchange'
        );

        // Save state on these two events.
        this.addStateEvents('expand', 'collapse');

        if (me.unstyled) {
            me.setUI('plain');
        }

        if (me.frame) {
            me.setUI(me.ui + '-framed');
        }

        me.callParent();

        me.collapseDirection = me.collapseDirection || me.headerPosition || Ext.Component.DIRECTION_TOP;

        // Backwards compatibility
        me.bridgeToolbars();
    },

    setBorder: function(border) {
        // var me     = this,
        //     method = (border === false || border === 0) ? 'addClsWithUI' : 'removeClsWithUI';
        //
        // me.callParent(arguments);
        //
        // if (me.collapsed) {
        //     me[method](me.collapsedCls + '-noborder');
        // }
        //
        // if (me.header) {
        //     me.header.setBorder(border);
        //     if (me.collapsed) {
        //         me.header[method](me.collapsedCls + '-noborder');
        //     }
        // }

        this.callParent(arguments);
    },

    beforeDestroy: function() {
        Ext.destroy(
            this.ghostPanel,
            this.dd
        );
        this.callParent();
    },

    initAria: function() {
        this.callParent();
        this.initHeaderAria();
    },

    initHeaderAria: function() {
        var me = this,
            el = me.el,
            header = me.header;
        if (el &amp;&amp; header) {
            el.dom.setAttribute('aria-labelledby', header.titleCmp.id);
        }
    },

    getHeader: function() {
        return this.header;
    },

<span id='Ext-panel-Panel-method-setTitle'>    /**
</span>     * Set a title for the panel&amp;#39;s header. See {@link Ext.panel.Header#title}.
     * @param {String} newTitle
     */
    setTitle: function(newTitle) {
        var me = this,
        oldTitle = this.title;

        me.title = newTitle;
        if (me.header) {
            me.header.setTitle(newTitle);
        } else {
            me.updateHeader();
        }

        if (me.reExpander) {
            me.reExpander.setTitle(newTitle);
        }
        me.fireEvent('titlechange', me, newTitle, oldTitle);
    },

<span id='Ext-panel-Panel-method-setIconCls'>    /**
</span>     * Set the iconCls for the panel&amp;#39;s header. See {@link Ext.panel.Header#iconCls}.
     * @param {String} newIconCls
     */
    setIconCls: function(newIconCls) {
        var me = this,
            oldIconCls = me.iconCls;

        me.iconCls = newIconCls;
        var header = me.header;
        if (header) {
            header.setIconCls(newIconCls);
        }
        me.fireEvent('iconchange', me, newIconCls, oldIconCls);
    },

    bridgeToolbars: function() {
        var me = this,
            fbar,
            fbarDefaults,
            minButtonWidth = me.minButtonWidth;

        function initToolbar (toolbar, pos, useButtonAlign) {
            if (Ext.isArray(toolbar)) {
                toolbar = {
                    xtype: 'toolbar',
                    items: toolbar
                };
            }
            else if (!toolbar.xtype) {
                toolbar.xtype = 'toolbar';
            }
            toolbar.dock = pos;
            if (pos == 'left' || pos == 'right') {
                toolbar.vertical = true;
            }

            // Legacy support for buttonAlign (only used by buttons/fbar)
            if (useButtonAlign) {
                toolbar.layout = Ext.applyIf(toolbar.layout || {}, {
                    // default to 'end' (right-aligned) if me.buttonAlign is undefined or invalid
                    pack: { left:'start', center:'center' }[me.buttonAlign] || 'end'
                });
            }
            return toolbar;
        }

        // Short-hand toolbars (tbar, bbar and fbar plus new lbar and rbar):

<span id='Ext-panel-Panel-cfg-buttonAlign'>    /**
</span>     * @cfg {String} buttonAlign
     * &lt;p&gt;The alignment of any buttons added to this panel.  Valid values are 'right',
     * 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;NOTE:&lt;/b&gt; The newer way to specify toolbars is to use the dockedItems config, and
     * instead of buttonAlign you would add the layout: { pack: 'start' | 'center' | 'end' }
     * option to the dockedItem config.&lt;/p&gt;
     */

<span id='Ext-panel-Panel-cfg-tbar'>        /**
</span>         * @cfg {Object/Array} tbar

Convenience method. Short for 'Top Bar'.

    tbar: [
      { xtype: 'button', text: 'Button 1' }
    ]

is equivalent to

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [
            { xtype: 'button', text: 'Button 1' }
        ]
    }]

         * @markdown
         */
        if (me.tbar) {
            me.addDocked(initToolbar(me.tbar, 'top'));
            me.tbar = null;
        }

<span id='Ext-panel-Panel-cfg-bbar'>        /**
</span>         * @cfg {Object/Array} bbar

Convenience method. Short for 'Bottom Bar'.

    bbar: [
      { xtype: 'button', text: 'Button 1' }
    ]

is equivalent to

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
            { xtype: 'button', text: 'Button 1' }
        ]
    }]

         * @markdown
         */
        if (me.bbar) {
            me.addDocked(initToolbar(me.bbar, 'bottom'));
            me.bbar = null;
        }

<span id='Ext-panel-Panel-cfg-buttons'>        /**
</span>         * @cfg {Object/Array} buttons

Convenience method used for adding buttons docked to the bottom of the panel. This is a
synonym for the {@link #fbar} config.

    buttons: [
      { text: 'Button 1' }
    ]

is equivalent to

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        defaults: {minWidth: {@link #minButtonWidth}},
        items: [
            { xtype: 'component', flex: 1 },
            { xtype: 'button', text: 'Button 1' }
        ]
    }]

The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
each of the buttons in the buttons toolbar.

         * @markdown
         */
        if (me.buttons) {
            me.fbar = me.buttons;
            me.buttons = null;
        }

<span id='Ext-panel-Panel-cfg-fbar'>        /**
</span>         * @cfg {Object/Array} fbar

Convenience method used for adding items to the bottom of the panel. Short for Footer Bar.

    fbar: [
      { type: 'button', text: 'Button 1' }
    ]

is equivalent to

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        defaults: {minWidth: {@link #minButtonWidth}},
        items: [
            { xtype: 'component', flex: 1 },
            { xtype: 'button', text: 'Button 1' }
        ]
    }]

The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
each of the buttons in the fbar.

         * @markdown
         */
        if (me.fbar) {
            fbar = initToolbar(me.fbar, 'bottom', true); // only we useButtonAlign
            fbar.ui = 'footer';

            // Apply the minButtonWidth config to buttons in the toolbar
            if (minButtonWidth) {
                fbarDefaults = fbar.defaults;
                fbar.defaults = function(config) {
                    var defaults = fbarDefaults || {};
                    if ((!config.xtype || config.xtype === 'button' || (config.isComponent &amp;&amp; config.isXType('button'))) &amp;&amp;
                            !('minWidth' in defaults)) {
                        defaults = Ext.apply({minWidth: minButtonWidth}, defaults);
                    }
                    return defaults;
                };
            }

            me.addDocked(fbar);
            me.fbar = null;
        }

<span id='Ext-panel-Panel-cfg-lbar'>        /**
</span>         * @cfg {Object/Array} lbar
         *
         * Convenience method. Short for 'Left Bar' (left-docked, vertical toolbar).
         *
         *     lbar: [
         *       { xtype: 'button', text: 'Button 1' }
         *     ]
         *
         * is equivalent to
         *
         *     dockedItems: [{
         *         xtype: 'toolbar',
         *         dock: 'left',
         *         items: [
         *             { xtype: 'button', text: 'Button 1' }
         *         ]
         *     }]
         *
         * @markdown
         */
        if (me.lbar) {
            me.addDocked(initToolbar(me.lbar, 'left'));
            me.lbar = null;
        }

<span id='Ext-panel-Panel-cfg-rbar'>        /**
</span>         * @cfg {Object/Array} rbar
         *
         * Convenience method. Short for 'Right Bar' (right-docked, vertical toolbar).
         *
         *     rbar: [
         *       { xtype: 'button', text: 'Button 1' }
         *     ]
         *
         * is equivalent to
         *
         *     dockedItems: [{
         *         xtype: 'toolbar',
         *         dock: 'right',
         *         items: [
         *             { xtype: 'button', text: 'Button 1' }
         *         ]
         *     }]
         *
         * @markdown
         */
        if (me.rbar) {
            me.addDocked(initToolbar(me.rbar, 'right'));
            me.rbar = null;
        }
    },

<span id='Ext-panel-Panel-method-initTools'>    /**
</span>     * @private
     * Tools are a Panel-specific capabilty.
     * Panel uses initTools. Subclasses may contribute tools by implementing addTools.
     */
    initTools: function() {
        var me = this;

        me.tools = me.tools || [];

        // Add a collapse tool unless configured to not show a collapse tool
        // or to not even show a header.
        if (me.collapsible &amp;&amp; !(me.hideCollapseTool || me.header === false)) {
            me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
            me.collapseTool = me.expandTool = me.createComponent({
                xtype: 'tool',
                type: 'collapse-' + me.collapseDirection,
                expandType: me.getOppositeDirection(me.collapseDirection),
                handler: me.toggleCollapse,
                scope: me
            });

            // Prepend collapse tool is configured to do so.
            if (me.collapseFirst) {
                me.tools.unshift(me.collapseTool);
            }
        }

        // Add subclass-specific tools.
        me.addTools();

        // Make Panel closable.
        if (me.closable) {
            me.addClsWithUI('closable');
            me.addTool({
                type: 'close',
                handler: Ext.Function.bind(me.close, this, [])
            });
        }

        // Append collapse tool if needed.
        if (me.collapseTool &amp;&amp; !me.collapseFirst) {
            me.tools.push(me.collapseTool);
        }
    },

<span id='Ext-panel-Panel-property-addTools'>    /**
</span>     * @private
     * Template method to be implemented in subclasses to add their tools after the collapsible tool.
     */
    addTools: Ext.emptyFn,

<span id='Ext-panel-Panel-method-close'>    /**
</span>     * &lt;p&gt;Closes the Panel. By default, this method, removes it from the DOM, {@link Ext.Component#destroy destroy}s
     * the Panel object and all its descendant Components. The {@link #beforeclose beforeclose}
     * event is fired before the close happens and will cancel the close action if it returns false.&lt;p&gt;
     * &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; This method is not affected by the {@link #closeAction} setting which
     * only affects the action triggered when clicking the {@link #closable 'close' tool in the header}.
     * To hide the Panel without destroying it, call {@link #hide}.&lt;/p&gt;
     */
    close: function() {
        if (this.fireEvent('beforeclose', this) !== false) {
            this.doClose();
        }
    },

    // private
    doClose: function() {
        this.fireEvent('close', this);
        this[this.closeAction]();
    },

    onRender: function(ct, position) {
        var me = this,
            topContainer;

        // Add class-specific header tools.
        // Panel adds collapsible and closable.
        me.initTools();

        // Dock the header/title
        me.updateHeader();

        // Call to super after adding the header, to prevent an unnecessary re-layout
        me.callParent(arguments);
    },

    afterComponentLayout: function() {
        var me = this;
        me.callParent(arguments);

        // Instate the collapsed state on our first component layout. We need to wait for
        // this moment so that we have established at least some of our size (from our
        // ownerCt).
        if (me.collapsed &amp;&amp; me.componentLayoutCounter == 1) {
            me.collapsed = false;
            me.collapse(null, false, true);
        }
    },

<span id='Ext-panel-Panel-method-updateHeader'>    /**
</span>     * Create, hide, or show the header component as appropriate based on the current config.
     * @private
     * @param {Boolean} force True to force the header to be created
     */
    updateHeader: function(force) {
        var me = this,
            header = me.header,
            title = me.title,
            tools = me.tools;

        if (!me.preventHeader &amp;&amp; (force || title || (tools &amp;&amp; tools.length))) {
            if (!header) {
                header = me.header = Ext.create('Ext.panel.Header', {
                    title       : title,
                    orientation : (me.headerPosition == 'left' || me.headerPosition == 'right') ? 'vertical' : 'horizontal',
                    dock        : me.headerPosition || 'top',
                    textCls     : me.headerTextCls,
                    iconCls     : me.iconCls,
                    baseCls     : me.baseCls + '-header',
                    tools       : tools,
                    ui          : me.ui,
                    indicateDrag: me.draggable,
                    border      : me.border,
                    frame       : me.frame &amp;&amp; me.frameHeader,
                    ignoreParentFrame : me.frame || me.overlapHeader,
                    ignoreBorderManagement: me.frame || me.ignoreHeaderBorderManagement,
                    listeners   : me.collapsible &amp;&amp; me.titleCollapse ? {
                        click: me.toggleCollapse,
                        scope: me
                    } : null
                });
                me.addDocked(header, 0);

                // Reference the Header's tool array.
                // Header injects named references.
                me.tools = header.tools;
            }
            header.show();
            me.initHeaderAria();
        } else if (header) {
            header.hide();
        }
    },

    // inherit docs
    setUI: function(ui) {
        var me = this;

        me.callParent(arguments);

        if (me.header) {
            me.header.setUI(ui);
        }
    },

    // private
    getContentTarget: function() {
        return this.body;
    },

    getTargetEl: function() {
        return this.body || this.frameBody || this.el;
    },

    addTool: function(tool) {
        this.tools.push(tool);
        var header = this.header;
        if (header) {
            header.addTool(tool);
        }
        this.updateHeader();
    },

    getOppositeDirection: function(d) {
        var c = Ext.Component;
        switch (d) {
            case c.DIRECTION_TOP:
                return c.DIRECTION_BOTTOM;
            case c.DIRECTION_RIGHT:
                return c.DIRECTION_LEFT;
            case c.DIRECTION_BOTTOM:
                return c.DIRECTION_TOP;
            case c.DIRECTION_LEFT:
                return c.DIRECTION_RIGHT;
        }
    },

<span id='Ext-panel-Panel-method-collapse'>    /**
</span>     * Collapses the panel body so that the body becomes hidden. Docked Components parallel to the
     * border towards which the collapse takes place will remain visible.  Fires the {@link #beforecollapse} event which will
     * cancel the collapse action if it returns false.
     * @param {String} direction. The direction to collapse towards. Must be one of&lt;ul&gt;
     * &lt;li&gt;Ext.Component.DIRECTION_TOP&lt;/li&gt;
     * &lt;li&gt;Ext.Component.DIRECTION_RIGHT&lt;/li&gt;
     * &lt;li&gt;Ext.Component.DIRECTION_BOTTOM&lt;/li&gt;
     * &lt;li&gt;Ext.Component.DIRECTION_LEFT&lt;/li&gt;&lt;/ul&gt;
     * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the
     * {@link #animCollapse} panel config)
     * @return {Ext.panel.Panel} this
     */
    collapse: function(direction, animate, /* private - passed if called at render time */ internal) {
        var me = this,
            c = Ext.Component,
            height = me.getHeight(),
            width = me.getWidth(),
            frameInfo,
            newSize = 0,
            dockedItems = me.dockedItems.items,
            dockedItemCount = dockedItems.length,
            i = 0,
            comp,
            pos,
            anim = {
                from: {
                    height: height,
                    width: width
                },
                to: {
                    height: height,
                    width: width
                },
                listeners: {
                    afteranimate: me.afterCollapse,
                    scope: me
                },
                duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration)
            },
            reExpander,
            reExpanderOrientation,
            reExpanderDock,
            getDimension,
            setDimension,
            collapseDimension;

        if (!direction) {
            direction = me.collapseDirection;
        }

        // If internal (Called because of initial collapsed state), then no animation, and no events.
        if (internal) {
            animate = false;
        } else if (me.collapsed || me.fireEvent('beforecollapse', me, direction, animate) === false) {
            return false;
        }

        reExpanderDock = direction;
        me.expandDirection = me.getOppositeDirection(direction);

        // Track docked items which we hide during collapsed state
        me.hiddenDocked = [];

        switch (direction) {
            case c.DIRECTION_TOP:
            case c.DIRECTION_BOTTOM:
                me.expandedSize = me.getHeight();
                reExpanderOrientation = 'horizontal';
                collapseDimension = 'height';
                getDimension = 'getHeight';
                setDimension = 'setHeight';

                // Collect the height of the visible header.
                // Hide all docked items except the header.
                // Hide *ALL* docked items if we're going to end up hiding the whole Panel anyway
                for (; i &lt; dockedItemCount; i++) {
                    comp = dockedItems[i];
                    if (comp.isVisible()) {
                        if (comp.isHeader &amp;&amp; (!comp.dock || comp.dock == 'top' || comp.dock == 'bottom')) {
                            reExpander = comp;
                        } else {
                            me.hiddenDocked.push(comp);
                        }
                    }
                }

                if (direction == Ext.Component.DIRECTION_BOTTOM) {
                    pos = me.getPosition()[1] - Ext.fly(me.el.dom.offsetParent).getRegion().top;
                    anim.from.top = pos;
                }
                break;

            case c.DIRECTION_LEFT:
            case c.DIRECTION_RIGHT:
                me.expandedSize = me.getWidth();
                reExpanderOrientation = 'vertical';
                collapseDimension = 'width';
                getDimension = 'getWidth';
                setDimension = 'setWidth';

                // Collect the height of the visible header.
                // Hide all docked items except the header.
                // Hide *ALL* docked items if we're going to end up hiding the whole Panel anyway
                for (; i &lt; dockedItemCount; i++) {
                    comp = dockedItems[i];
                    if (comp.isVisible()) {
                        if (comp.isHeader &amp;&amp; (comp.dock == 'left' || comp.dock == 'right')) {
                            reExpander = comp;
                        } else {
                            me.hiddenDocked.push(comp);
                        }
                    }
                }

                if (direction == Ext.Component.DIRECTION_RIGHT) {
                    pos = me.getPosition()[0] - Ext.fly(me.el.dom.offsetParent).getRegion().left;
                    anim.from.left = pos;
                }
                break;

            default:
                throw('Panel collapse must be passed a valid Component collapse direction');
        }

        // No scrollbars when we shrink this Panel
        // And no laying out of any children... we're effectively *hiding* the body
        me.setAutoScroll(false);
        me.suspendLayout = true;
        me.body.setVisibilityMode(Ext.core.Element.DISPLAY);

        // Disable toggle tool during animated collapse
        if (animate &amp;&amp; me.collapseTool) {
            me.collapseTool.disable();
        }

        // Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken.
        me.addClsWithUI(me.collapsedCls);
        // if (me.border === false) {
        //     me.addClsWithUI(me.collapsedCls + '-noborder');
        // }

        // We found a header: Measure it to find the collapse-to size.
        if (reExpander) {
            //we must add the collapsed cls to the header and then remove to get the proper height
            reExpander.addClsWithUI(me.collapsedCls);
            reExpander.addClsWithUI(me.collapsedCls + '-' + reExpander.dock);
            if (me.border &amp;&amp; (!me.frame || (me.frame &amp;&amp; Ext.supports.CSS3BorderRadius))) {
                reExpander.addClsWithUI(me.collapsedCls + '-border-' + reExpander.dock);
            }

            frameInfo = reExpander.getFrameInfo();

            //get the size
            newSize = reExpander[getDimension]() + (frameInfo ? frameInfo[direction] : 0);

            //and remove
            reExpander.removeClsWithUI(me.collapsedCls);
            reExpander.removeClsWithUI(me.collapsedCls + '-' + reExpander.dock);
            if (me.border &amp;&amp; (!me.frame || (me.frame &amp;&amp; Ext.supports.CSS3BorderRadius))) {
                reExpander.removeClsWithUI(me.collapsedCls + '-border-' + reExpander.dock);
            }
        }
        // No header: Render and insert a temporary one, and then measure it.
        else {
            reExpander = {
                hideMode: 'offsets',
                temporary: true,
                title: me.title,
                orientation: reExpanderOrientation,
                dock: reExpanderDock,
                textCls: me.headerTextCls,
                iconCls: me.iconCls,
                baseCls: me.baseCls + '-header',
                ui: me.ui,
                frame: me.frame &amp;&amp; me.frameHeader,
                ignoreParentFrame: me.frame || me.overlapHeader,
                indicateDrag: me.draggable,
                cls: me.baseCls + '-collapsed-placeholder ' + ' ' + Ext.baseCSSPrefix + 'docked ' + me.baseCls + '-' + me.ui + '-collapsed',
                renderTo: me.el
            };
            if (!me.hideCollapseTool) {
                reExpander[(reExpander.orientation == 'horizontal') ? 'tools' : 'items'] = [{
                    xtype: 'tool',
                    type: 'expand-' + me.expandDirection,
                    handler: me.toggleCollapse,
                    scope: me
                }];
            }

            // Capture the size of the re-expander.
            // For vertical headers in IE6 and IE7, this will be sized by a CSS rule in _panel.scss
            reExpander = me.reExpander = Ext.create('Ext.panel.Header', reExpander);
            newSize = reExpander[getDimension]() + ((reExpander.frame) ? reExpander.frameSize[direction] : 0);
            reExpander.hide();

            // Insert the new docked item
            me.insertDocked(0, reExpander);
        }

        me.reExpander = reExpander;
        me.reExpander.addClsWithUI(me.collapsedCls);
        me.reExpander.addClsWithUI(me.collapsedCls + '-' + reExpander.dock);
        if (me.border &amp;&amp; (!me.frame || (me.frame &amp;&amp; Ext.supports.CSS3BorderRadius))) {
            me.reExpander.addClsWithUI(me.collapsedCls + '-border-' + me.reExpander.dock);
        }

        // If collapsing right or down, we'll be also animating the left or top.
        if (direction == Ext.Component.DIRECTION_RIGHT) {
            anim.to.left = pos + (width - newSize);
        } else if (direction == Ext.Component.DIRECTION_BOTTOM) {
            anim.to.top = pos + (height - newSize);
        }

        // Animate to the new size
        anim.to[collapseDimension] = newSize;

        // When we collapse a panel, the panel is in control of one dimension (depending on
        // collapse direction) and sets that on the component. We must restore the user's
        // original value (including non-existance) when we expand. Using this technique, we
        // mimic setCalculatedSize for the dimension we do not control and setSize for the
        // one we do (only while collapsed).
        if (!me.collapseMemento) {
            me.collapseMemento = new Ext.util.Memento(me);
        }
        me.collapseMemento.capture(['width', 'height', 'minWidth', 'minHeight']);

        // Remove any flex config before we attempt to collapse.
        me.savedFlex = me.flex;
        me.minWidth = 0;
        me.minHeight = 0;
        delete me.flex;

        if (animate) {
            me.animate(anim);
        } else {
            me.setSize(anim.to.width, anim.to.height);
            if (Ext.isDefined(anim.to.left) || Ext.isDefined(anim.to.top)) {
                me.setPosition(anim.to.left, anim.to.top);
            }
            me.afterCollapse(false, internal);
        }
        return me;
    },

    afterCollapse: function(animated, internal) {
        var me = this,
            i = 0,
            l = me.hiddenDocked.length;

        me.collapseMemento.restore(['minWidth', 'minHeight']);

        me.body.hide();
        for (; i &lt; l; i++) {
            me.hiddenDocked[i].hide();
        }
        if (me.reExpander) {
            me.reExpander.updateFrame();
            me.reExpander.show();
        }
        me.collapsed = true;

        if (!internal) {
            me.doComponentLayout();
        }

        if (me.resizer) {
            me.resizer.disable();
        }

        // Now we can restore the dimension we don't control to its original state
        if (Ext.Component.VERTICAL_DIRECTION.test(me.expandDirection)) {
            me.collapseMemento.restore('width');
        } else {
            me.collapseMemento.restore('height');
        }

        // If me Panel was configured with a collapse tool in its header, flip it's type
        if (me.collapseTool) {
            me.collapseTool.setType('expand-' + me.expandDirection);
        }
        if (!internal) {
            me.fireEvent('collapse', me);
        }

        // Re-enable the toggle tool after an animated collapse
        if (animated &amp;&amp; me.collapseTool) {
            me.collapseTool.enable();
        }
    },

<span id='Ext-panel-Panel-method-expand'>    /**
</span>     * Expands the panel body so that it becomes visible.  Fires the {@link #beforeexpand} event which will
     * cancel the expand action if it returns false.
     * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the
     * {@link #animCollapse} panel config)
     * @return {Ext.panel.Panel} this
     */
    expand: function(animate) {
        var me = this;
        if (!me.collapsed || me.fireEvent('beforeexpand', me, animate) === false) {
            return false;
        }

        var i = 0,
            l = me.hiddenDocked.length,
            direction = me.expandDirection,
            height = me.getHeight(),
            width = me.getWidth(),
            pos, anim;

        // Disable toggle tool during animated expand
        if (animate &amp;&amp; me.collapseTool) {
            me.collapseTool.disable();
        }

        // Show any docked items that we hid on collapse
        // And hide the injected reExpander Header
        for (; i &lt; l; i++) {
            me.hiddenDocked[i].hidden = false;
            me.hiddenDocked[i].el.show();
        }
        if (me.reExpander) {
            if (me.reExpander.temporary) {
                me.reExpander.hide();
            } else {
                me.reExpander.removeClsWithUI(me.collapsedCls);
                me.reExpander.removeClsWithUI(me.collapsedCls + '-' + me.reExpander.dock);
                if (me.border &amp;&amp; (!me.frame || (me.frame &amp;&amp; Ext.supports.CSS3BorderRadius))) {
                    me.reExpander.removeClsWithUI(me.collapsedCls + '-border-' + me.reExpander.dock);
                }
                me.reExpander.updateFrame();
            }
        }

        // If me Panel was configured with a collapse tool in its header, flip it's type
        if (me.collapseTool) {
            me.collapseTool.setType('collapse-' + me.collapseDirection);
        }

        // Unset the flag before the potential call to calculateChildBox to calculate our newly flexed size
        me.collapsed = false;

        // Collapsed means body element was hidden
        me.body.show();

        // Remove any collapsed styling before any animation begins
        me.removeClsWithUI(me.collapsedCls);
        // if (me.border === false) {
        //     me.removeClsWithUI(me.collapsedCls + '-noborder');
        // }

        anim = {
            to: {
            },
            from: {
                height: height,
                width: width
            },
            listeners: {
                afteranimate: me.afterExpand,
                scope: me
            }
        };

        if ((direction == Ext.Component.DIRECTION_TOP) || (direction == Ext.Component.DIRECTION_BOTTOM)) {

            // If autoHeight, measure the height now we have shown the body element.
            if (me.autoHeight) {
                me.setCalculatedSize(me.width, null);
                anim.to.height = me.getHeight();

                // Must size back down to collapsed for the animation.
                me.setCalculatedSize(me.width, anim.from.height);
            }
            // If we were flexed, then we can't just restore to the saved size.
            // We must restore to the currently correct, flexed size, so we much ask the Box layout what that is.
            else if (me.savedFlex) {
                me.flex = me.savedFlex;
                anim.to.height = me.ownerCt.layout.calculateChildBox(me).height;
                delete me.flex;
            }
            // Else, restore to saved height
            else {
                anim.to.height = me.expandedSize;
            }

            // top needs animating upwards
            if (direction == Ext.Component.DIRECTION_TOP) {
                pos = me.getPosition()[1] - Ext.fly(me.el.dom.offsetParent).getRegion().top;
                anim.from.top = pos;
                anim.to.top = pos - (anim.to.height - height);
            }
        } else if ((direction == Ext.Component.DIRECTION_LEFT) || (direction == Ext.Component.DIRECTION_RIGHT)) {

            // If autoWidth, measure the width now we have shown the body element.
            if (me.autoWidth) {
                me.setCalculatedSize(null, me.height);
                anim.to.width = me.getWidth();

                // Must size back down to collapsed for the animation.
                me.setCalculatedSize(anim.from.width, me.height);
            }
            // If we were flexed, then we can't just restore to the saved size.
            // We must restore to the currently correct, flexed size, so we much ask the Box layout what that is.
            else if (me.savedFlex) {
                me.flex = me.savedFlex;
                anim.to.width = me.ownerCt.layout.calculateChildBox(me).width;
                delete me.flex;
            }
            // Else, restore to saved width
            else {
                anim.to.width = me.expandedSize;
            }

            // left needs animating leftwards
            if (direction == Ext.Component.DIRECTION_LEFT) {
                pos = me.getPosition()[0] - Ext.fly(me.el.dom.offsetParent).getRegion().left;
                anim.from.left = pos;
                anim.to.left = pos - (anim.to.width - width);
            }
        }

        if (animate) {
            me.animate(anim);
        } else {
            me.setCalculatedSize(anim.to.width, anim.to.height);
            if (anim.to.x) {
                me.setLeft(anim.to.x);
            }
            if (anim.to.y) {
                me.setTop(anim.to.y);
            }
            me.afterExpand(false);
        }

        return me;
    },

    afterExpand: function(animated) {
        var me = this;

        if (me.collapseMemento) {
            // collapse has to use setSize (since it takes control of the component's size in
            // collapsed mode) and so we restore the original size now that the component has
            // been expanded.
            me.collapseMemento.restoreAll();
        }

        me.setAutoScroll(me.initialConfig.autoScroll);

        // Restored to a calculated flex. Delete the set width and height properties so that flex works from now on.
        if (me.savedFlex) {
            me.flex = me.savedFlex;
            delete me.savedFlex;
            delete me.width;
            delete me.height;
        }

        // Reinstate layout out after Panel has re-expanded
        delete me.suspendLayout;
        if (animated &amp;&amp; me.ownerCt) {
            // IE 6 has an intermittent repaint issue in this case so give
            // it a little extra time to catch up before laying out.
            Ext.defer(me.ownerCt.doLayout, Ext.isIE6 ? 1 : 0, me);
        }

        if (me.resizer) {
            me.resizer.enable();
        }

        me.fireEvent('expand', me);

        // Re-enable the toggle tool after an animated expand
        if (animated &amp;&amp; me.collapseTool) {
            me.collapseTool.enable();
        }
    },

<span id='Ext-panel-Panel-method-toggleCollapse'>    /**
</span>     * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel.
     * @return {Ext.panel.Panel} this
     */
    toggleCollapse: function() {
        if (this.collapsed) {
            this.expand(this.animCollapse);
        } else {
            this.collapse(this.collapseDirection, this.animCollapse);
        }
        return this;
    },

    // private
    getKeyMap : function(){
        if(!this.keyMap){
            this.keyMap = Ext.create('Ext.util.KeyMap', this.el, this.keys);
        }
        return this.keyMap;
    },

    // private
    initDraggable : function(){
<span id='Ext-panel-Panel-property-dd'>        /**
</span>         * &lt;p&gt;If this Panel is configured {@link #draggable}, this property will contain
         * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.&lt;/p&gt;
         * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
         * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
         * @type Ext.dd.DragSource.
         * @property dd
         */
        this.dd = Ext.create('Ext.panel.DD', this, Ext.isBoolean(this.draggable) ? null : this.draggable);
    },

    // private - helper function for ghost
    ghostTools : function() {
        var tools = [],
            origTools = this.initialConfig.tools;

        if (origTools) {
            Ext.each(origTools, function(tool) {
                // Some tools can be full components, and copying them into the ghost
                // actually removes them from the owning panel. You could also potentially
                // end up with duplicate DOM ids as well. To avoid any issues we just make
                // a simple bare-minimum clone of each tool for ghosting purposes.
                tools.push({
                    type: tool.type
                });
            });
        }
        else {
            tools = [{
                type: 'placeholder'
            }];
        }
        return tools;
    },

    // private - used for dragging
    ghost: function(cls) {
        var me = this,
            ghostPanel = me.ghostPanel,
            box = me.getBox();

        if (!ghostPanel) {
            ghostPanel = Ext.create('Ext.panel.Panel', {
                renderTo: document.body,
                floating: {
                    shadow: false
                },
                frame: Ext.supports.CSS3BorderRadius ? me.frame : false,
                title: me.title,
                overlapHeader: me.overlapHeader,
                headerPosition: me.headerPosition,
                width: me.getWidth(),
                height: me.getHeight(),
                iconCls: me.iconCls,
                baseCls: me.baseCls,
                tools: me.ghostTools(),
                cls: me.baseCls + '-ghost ' + (cls ||'')
            });
            me.ghostPanel = ghostPanel;
        }
        ghostPanel.floatParent = me.floatParent;
        if (me.floating) {
            ghostPanel.setZIndex(Ext.Number.from(me.el.getStyle('zIndex'), 0));
        } else {
            ghostPanel.toFront();
        }
        ghostPanel.el.show();
        ghostPanel.setPosition(box.x, box.y);
        ghostPanel.setSize(box.width, box.height);
        me.el.hide();
        if (me.floatingItems) {
            me.floatingItems.hide();
        }
        return ghostPanel;
    },

    // private
    unghost: function(show, matchPosition) {
        var me = this;
        if (!me.ghostPanel) {
            return;
        }
        if (show !== false) {
            me.el.show();
            if (matchPosition !== false) {
                me.setPosition(me.ghostPanel.getPosition());
            }
            if (me.floatingItems) {
                me.floatingItems.show();
            }
            Ext.defer(me.focus, 10, me);
        }
        me.ghostPanel.el.hide();
    },

    initResizable: function(resizable) {
        if (this.collapsed) {
            resizable.disabled = true;
        }
        this.callParent([resizable]);
    }
});
</pre>
</body>
</html>
